<template>
  <div class="loginDiv" v-if="!isLogin">
    <div class="topTitleDiv">
      <!-- 头部结构 -->
      <img src="https://music.qier222.com/img/logos/yesplaymusic.png" alt="" />
      <span>×</span>
      <img src="https://music.qier222.com/img/logos/netease-music.png" alt="" />
      <div class="loginForm">
        <a-form
          :model="formState"
          name="basic"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 30 }"
          autocomplete="off"
          labelAlign="right"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <h1>登陆网易云账号</h1>
          <a-form-item label="手机号码" name="phone" :rules="phoneRules">
            <a-input v-model:value="formState.phone" :max-length="11" />
          </a-form-item>
          <a-form-item label="请输入验证码" name="code" :rules="CodeRules">
            <div style="display: flex">
              <a-input v-model:value="formState.code" />
              <a-button :disabled="isCode" @click="getCode">{{
                Codetitle
              }}</a-button>
            </div>
          </a-form-item>
          <a-button style="width: 14vw" html-type="submit">登陆</a-button>
        </a-form>
      </div>
    </div>
  </div>
  <div v-if="isLogin" class="pageDiv" style="width: 80%; height: 89vh">
    <h1 class="cartoonFont">您已登陆！</h1>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  onMounted,
} from "@vue/runtime-core";
import { message } from "ant-design-vue";
import { getCodeStore, captchaCodeStore, getLoginStore } from "../../store";

// 定义表单接口
interface FormState {
  phone: number | undefined;
  code: number | undefined;
}

export default defineComponent({
  name: "app",
  setup() {
    // 验证码按钮
    let Codetitle: any = ref("获取验证码");
    let isCode = ref(false);
    //判断是否登陆
    const isLogin = ref(false);
    // 登陆成功获取token令牌
    let loginData = ref();
    let cookie = ref();
    //定义输入表单接口接收数据
    const formState = reactive<FormState>({
      phone: undefined,
      code: undefined,
    });
    //自定义电话前端验证
    const phoneRules: any = {
      required: true,
      trigger: "blur",
      message: "请输入手机号",
    };
    const CodeRules: any = {
      required: true,
      trigger: "blur",
      message: "请输入验证码",
    };
    //声明一个用户信息来存入登陆状态
    const userData: any = ref();

    // 获取验证码
    function getCode() {
      if (formState.phone === undefined) {
        message.error("请输入正确的电话号码");
      }
      // 获取电话号码对对应的电话号码发送验证码的请求
      const sendCode = getCodeStore();
      sendCode.fetch(formState.phone);
      //发送请求后触发监听器来禁止获取验证码按钮行动

      // sendCode.fetch(formState.phone)
    }
    // 若前端验证通过则发送请求获取登陆状态
    const onFinish = async (values: any) => {
      const captchaCode = captchaCodeStore();
      userData.value = await captchaCode.fetch(values.phone, values.code);
      // 设置用户信息在vuex中
      loginData = userData.value.data;
      getLoginStore().getCookie(userData.value.data.cookie);
      getLoginStore().getUseData(loginData);
      isLogin.value = true;
      // 给本地设置cookie
      sessionStorage.setItem("useCookies", userData.value.data.cookie);
      console.log("Success:", getLoginStore().cookie);
      console.log("登陆成功获取TOken", getLoginStore().data);
      message.success("登陆成功！");
    };
    // 若验证不通过则没有
    const onFinishFailed = (errorInfo: any) => {
      console.log("Failed:", errorInfo);
    };

    onMounted(() => {
      if (getLoginStore().cookie === null) {
        isLogin.value = false;
      } else {
        isLogin.value = true;
      }
      // 获取session放入store中保存状态
      
    });
    return {
      formState,
      phoneRules,
      CodeRules,
      isCode,
      isLogin,
      Codetitle,
      getCode,
      onFinish,
      onFinishFailed,
    };
  },
});
</script>

<style lang="less" scoped>
.loginDiv {
  .topTitleDiv {
    margin: 2% 42%;
    img {
      width: 80px;
    }
    span {
      font-size: 100px;
      color: #999;
      margin: 4%;
      text-align: center;
    }
    .btn {
      margin: 22%;
      text-align: center;
    }
  }
  .loginForm {
    text-align: center;
    font-weight: 700;
    margin-top: 10%;
  }
}
</style>
